<script setup>
const onEnter = (el) => {

}

const onLeave = (el) => {

}
</script>

<template>
    <transition
        appear
        name="base-transition"
        @enter="onEnter"
        @leave="onLeave"
    >
        <slot></slot>
    </transition>
</template>

<style>
.base-transition-enter-active {
    transition: all 0.3s ease-in-out;
}

.base-transition-leave-active {
    transition: all 0.3s ease-in-out;
}

.base-transition-enter-from {
    transform: translateX(30px);
    opacity: 0;
}

.base-transition-leave-to {
    transform: translateX(30px);
    opacity: 0;
}
</style>